import { Modal } from "antd";

import { OrderDataType } from "@/types/order";

interface StatusModalProps {
  open: boolean;
  data: OrderDataType | OrderDataType[] | null;
  onClose: () => void;
  onConfirm: () => void;
  modalType?: "confirm" | "error" | "info";
  title?: string;
  content?: string;
}

export default function StatusModal({ open, data, onClose, onConfirm, title, content }: StatusModalProps) {
  if (!open) return null;

  const getModalProps = () => {
    return {
      title: title || "提示",
      onOk: onConfirm,
      onCancel: onClose,
      okText: "确认",
      cancelText: "取消",
    };
  };

  const renderContent = () => {
    if (content) {
      return (
        <div className="text-center">
          <div className="text-base">{content}</div>
        </div>
      );
    }

    if (!data) return null;

    return (
      <div className="text-center">
        <div className="text-base">
          {Array.isArray(data) ? (
            <span>
              确定要{data.length > 0 && data[0].isVisible ? "开启" : "关闭"}以下商单吗？
              <br />
              <div className="mt-2 text-gray-600">
                {data.map((item, index) => (
                  <span key={item.id}>
                    {item.title}
                    {index < data.length - 1 ? "、" : ""}
                  </span>
                ))}
              </div>
            </span>
          ) : (
            <span>
              确定要{data.isVisible ? "关闭" : "开启"}商单"{data.title}"吗？
            </span>
          )}
        </div>
      </div>
    );
  };

  return (
    <Modal open={open} {...getModalProps()} width={460} centered>
      {renderContent()}
    </Modal>
  );
}
